<!--
 *@Date: 2022-12-07 15:44:09
 * @LastEditTime: 2023-02-09 09:59:11
 *
 * @Description:
-->
<template>
    <base-container>
        <view class="top">
            <view class="content" @tap="userInfo">
                <image class="avatar" mode="aspectFill"
                    :src="(HOST + '?sjdx.dxdm=SYS_QX_QTQX&sys.cllx=download&yobj.id=' + user.tx)"></image>
                <view class="user">
                    {{ user.yhxm }}
                </view>
<!--                <uni-icons class="forward" type="forward" color="#ffffff" size="16"></uni-icons>-->
                <!-- <image class="avatar" mode="aspectFill" :src="(HOST + '?sjdx.dxdm=SYS_QX_QTQX&sys.cllx=download&yobj.id=' + user.tx)"
                  style="width: 18rpx;height: 36rpx;margin-left: 10rpx;"></image> -->
            </view>
        </view>
        <view class="item" style="margin-top: -40rpx">
            <!-- <image class="exit-icon" :src="$ossUrl('icon_my_exit.png')">
				</image> -->
            <view class="item-text">
                当前系统：{{ currentSYS.mc }}
            </view>
        </view>
        <view @tap="checkSys" class="item">
            <!-- <image class="exit-icon" :src="$ossUrl('icon_my_exit.png')">
				</image> -->
            <view class="item-text">
                切换系统
            </view>
        </view>
        <view class="item" @tap="cleanStore">
            <!-- <image class="exit-icon" :src="$ossUrl('icon_my_exit.png')">
				</image> -->
            <view class="item-text">
                清理本地缓存
            </view>
        </view>
        <!-- #ifdef MP-WEIXIN -->
        <view class="item" @tap="bind">
            <!-- <image class="exit-icon" :src="$ossUrl('icon_my_exit.png')">
				</image> -->
            <view class="item-text">
                绑定已有账号
            </view>
        </view>
        <!-- #endif -->
        <view class="item" style="margin-top:400rpx" @tap="logout">
            <!-- <image class="exit-icon" :src="$ossUrl('icon_my_exit.png')">
				</image> -->
            <view class="item-text">
                退出登录
            </view>
        </view>
        <uni-popup ref="popup" type="bottom" background-color="#F5F7F8">
            <uni-section title="请选择系统" type="line" style="padding-bottom:50px">
                <uni-list>
                    <uni-list-item v-for="(item, index) in sysList" clickable @click="checkedSys(item)" :key="index"
                        showArrow :title="item.mc" />
                </uni-list>
            </uni-section>
        </uni-popup>
    </base-container>
</template>

<script setup lang="ts">
import LoginModelImp from '@/pages/login/model/LoginModelImp';
import MyModelImp from '@/pages/my/model/MyModelImp';
import { useUserStore } from '@/stores/modules/user';
import api from '@/utils/net/api';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';

const HOST = api.HOST;
const user = useUserStore().getUser;
const loginModelImp = new LoginModelImp();
const myModelImp = new MyModelImp();
const sysList = ref([] as any[])
const currentSYS = ref({ mc: '' })
const popup = ref()

const cleanStore = () => {
    uni.showModal({
        title: '提示',
        content: '你确定清理吗？',
        success: function (res) {
            if (res.confirm) {
                myModelImp.clearStorage().then(() => {
                    uni.showToast({
                        title: '清理成功'
                    })
                })
            }
        }
    })
}

onShow(() => {
    myModelImp.getSysList().then((res) => {
        sysList.value = res.filter((item: any) => {
            if (item.dm == useUserStore().getCurrentSystemCode) {
                currentSYS.value = item
            }
            return item.dm !== useUserStore().getCurrentSystemCode
        })
        console.log(sysList.value)
    })
})

const bind = () => {
    uni.navigateTo({ url: '/pages/login/view/bind' })
}

const checkSys = () => {
    popup.value.open('bottom')
}
const checkedSys = (item: any) => {
    myModelImp.checkSys(item)
    currentSYS.value = item
    popup.value.close()
}

const logout = () => {
    uni.showModal({
        title: '提示',
        content: '您确定要退出吗？',
        success: function (res) {
            if (res.confirm) {
                loginModelImp.UserLogout()
            } else if (res.cancel) {
                console.log('用户点击取消');
            }
        }
    });

}

const userInfo = () => {
    // uni.navigateTo({ url: '/pages/my/view/detail' })
    console.log('userInfo')
}

</script>

<style lang="scss" scoped>
.top {
    width: 100vw;
    padding: 100rpx 0;
    background-color: #007aff;
    display: flex;
    flex-direction: column;

    .title {
        font-size: 34rpx;
        color: #FFFFFF;
        text-align: center;
    }

    .content {
        display: flex;
        align-items: center;
        padding: 28rpx 32rpx 0 36rpx;

        .avatar {
            width: 120rpx;
            height: 120rpx;
            border: 4rpx solid #FFFFFF80;
            border-radius: 50%;
        }

        .user {
            padding-left: 28rpx;
            width: 534rpx;
            font-size: 36rpx;
            line-height: 50rpx;
            color: #FFFFFF;
            flex: 1;
        }

        .forward {
            color: #FFFFFF;
        }
    }
}

.item {
    margin: 24rpx 32rpx 0;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 34rpx 32rpx;
    border-radius: 16rpx;

    .item-icon {
        width: 44rpx;
        height: 44rpx;
        padding-right: 16rpx;
    }

    .item-text {
        color: #272727;
        font-size: 28rpx;
        line-height: 40rpx;
    }
}
</style>
